<template>
  <div class="progress-tracking">
    <el-row :gutter="20">
      <el-col :span="24">
        <el-card class="overall-progress" shadow="hover">
          <div slot="header" class="card-header">
            <span>项目整体进度</span>
            <el-tooltip content="以已完成需求数占总需求数的百分比计算" placement="top">
              <i class="el-icon-info"></i>
            </el-tooltip>
          </div>
          <div class="progress-content">
            <el-progress 
              type="dashboard" 
              :percentage="overallProgress" 
              :color="customColors"
              :stroke-width="10">
              <template slot="default">
                <h3>{{ overallProgress }}%</h3>
                <p>完成度</p>
              </template>
            </el-progress>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="requirement-progress">
      <el-col :span="24">
        <el-card shadow="hover">
          <div slot="header" class="card-header">
            <span>需求完成情况</span>
            <el-button type="text" @click="refreshRequirements">
              <i class="el-icon-refresh"></i> 刷新
            </el-button>
          </div>
          <div class="requirement-stats">
            <el-table 
              :data="requirementStats" 
              style="width: 100%"
              border>
              <el-table-column prop="status" label="状态" width="120">
                <template slot-scope="scope">
                  <el-tag :type="getStatusType(scope.row.status)" effect="dark">
                    {{ scope.row.status }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="count" label="数量" width="100" align="center">
                <template slot-scope="scope">
                  <span class="count-text" style="font-weight:bold;">{{ scope.row.count }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="percentage" label="占比">
                <template slot-scope="scope">
                  <span class="percentage-text">
                    {{ scope.row.count > 0 ? scope.row.percentage + '%' : '-' }}
                  </span>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { requirementService } from '@/services/projectService'

export default {
  name: 'ProgressTracking',
  data() {
    return {
      overallProgress: 0,
      requirementStats: [],
      customColors: [
        {color: '#f56c6c', percentage: 20},
        {color: '#e6a23c', percentage: 40},
        {color: '#5cb87a', percentage: 60},
        {color: '#1989fa', percentage: 80},
        {color: '#6f7ad3', percentage: 100}
      ]
    }
  },
  methods: {
    getStatusType(status) {
      const statusMap = {
        '未开始': 'info',
        '进行中': 'warning',
        '已完成': 'success',
        '待处理': 'info',
        '已拒绝': 'danger'
      }
      return statusMap[status] || 'info'
    },
    getStatusColor(status) {
      const colorMap = {
        '待处理': '#909399',
        '进行中': '#e6a23c',
        '已完成': '#67c23a',
        '已拒绝': '#f56c6c'
      }
      return colorMap[status] || '#909399'
    },
    calculateOverallProgress() {
      // 以已完成需求数占总需求数的百分比为整体进度
      const stats = this.requirementStats
      const total = stats.reduce((sum, item) => sum + item.count, 0)
      const completed = stats.find(item => item.status === '已完成')?.count || 0
      return total ? Math.round((completed / total) * 100) : 0
    },
    refreshRequirements() {
      try {
        this.requirementStats = requirementService.getRequirementStats()
        this.overallProgress = this.calculateOverallProgress()
        this.$message.success('需求数据已更新')
      } catch (error) {
        this.$message.error('更新需求数据失败：' + error.message)
      }
    },
    autoRefresh() {
      this.refreshRequirements()
    }
  },
  created() {
    this.autoRefresh()
    this.$root.$on('requirements-updated', this.refreshRequirements)
  },
  beforeDestroy() {
    this.$root.$off('requirements-updated', this.refreshRequirements)
  }
}
</script>

<style scoped>
.progress-tracking {
  padding: 20px;
}

.overall-progress {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-header i {
  color: #909399;
  cursor: pointer;
}

.progress-content {
  text-align: center;
  padding: 20px 0;
}

.progress-content h3 {
  font-size: 28px;
  margin: 0;
  color: #303133;
}

.progress-content p {
  margin: 8px 0 0;
  color: #909399;
}

.requirement-progress {
  margin-bottom: 20px;
}

.requirement-stats {
  margin-top: 20px;
}

.progress-cell {
  display: flex;
  align-items: center;
  gap: 16px;
}

.count-text {
  font-size: 16px;
  font-weight: 500;
  color: #303133;
}

.percentage-text {
  min-width: 48px;
  text-align: right;
  color: #606266;
}

:deep(.el-card__header) {
  padding: 15px 20px;
  border-bottom: 1px solid #EBEEF5;
  box-sizing: border-box;
}

:deep(.el-table th) {
  background-color: #f5f7fa;
  color: #606266;
  font-weight: 600;
}
</style> 